import React, { PureComponent } from "react";
import { connect } from "react-redux";
import invite_bg1 from "assets/images/invite_bg1.png";
import invite1 from "assets/images/threeapp/invite1.png";
import invite2 from "assets/images/threeapp/invite2.png";
import invite3 from "assets/images/threeapp/invite3.png";
import invite4 from "assets/images/threeapp/invite4.png";
import sharePoint from "assets/images/sharePoint.png";

import { Flex } from "antd-mobile";
import s from "./index.scss";
import AxHeader from "components/AxHeader";
import { callApi } from "app/utils";
import Modal from "antd/lib/Modal";

@connect(
  state => ({
    login: state.login
  }),
  {}
)
export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      selectTab: 1,
      recordData: {},
      dialogTitle: "邀请好友奖励规则",
      visible: false,
      mask:false
    };
    this.rewardDetails = this.rewardDetails.bind(this);
  }

  componentDidMount() {
    let that = this;
    setTimeout(() => {
      if (that.props.login.isLogin == true) {
        callApi(
          "/account/invite/record",
          { token: JSON.parse(localStorage.getItem("userData")).token },
          "POST"
        ).then(data => {
          if (data.success == true) {
            that.setState({
              recordData: data.data
            });
          }
        });
      }
    }, 1000);
  }
   //销毁时解绑事件
   componentWillUnmount() {
    this.setState = (state,callback)=>{
      return;
    };  
  }
  inviteBtn(cur){
    this.setState({
      mask:cur
    })
  }
  selectTab(cur) {
    this.setState({
      selectTab: cur
    });
  }

  rewardDetails() {
    this.setState({
      visible: true
    });
  }
  handleCancel() {
    this.setState({
      visible: false
    });
  }

  render() {
    let { recordData } = this.state;

    return (
      <div className={`${s.inviteBox}`}>
        {this.state.mask==true?
          <div className={`${s.mask}`} onClick={this.inviteBtn.bind(this,false)}>
          <img
            src={sharePoint}
            style={{
              width: "2.8rem",
              height: "0.55rem",
              position: "absolute",
              right: "0.2rem",
              top: "0.5rem"
            }}
          />
        </div>:
        null}
        <AxHeader
          right={
            <div className={`color26`} onClick={this.rewardDetails}>
              奖励细则
            </div>
          }
        />
        <Flex className={`${s.top}`}>
          <img src={invite_bg1} className={`${s.img}`} />
        </Flex>
        <div className={`${s.bg}`}>
          <Flex className={`${s.selectTab}`}>
            <Flex.Item
              className={`${s.item} ${s.leftBtn} ${
                this.state.selectTab == 1 ? s.active : null
              }`}
              onClick={this.selectTab.bind(this, 1)}
            >
              奖励记录
            </Flex.Item>
            <Flex.Item
              className={`${s.item} ${s.rightBtn} ${
                this.state.selectTab == 2 ? s.active : null
              }`}
              onClick={this.selectTab.bind(this, 2)}
            >
              邀请记录
            </Flex.Item>
          </Flex>
          {this.state.selectTab == 1 ? (
            <Flex className={`${s.tabBox}`}>
              <Flex.Item className={`${s.item}`}>
                <Flex.Item className={`${s.childItem}`}>
                  <img src={invite1} className={`${s.iconImg}`} />总奖励金额
                </Flex.Item>
                <Flex.Item className={`${s.childItem}`}>
                  {recordData.totalAmount}元
                </Flex.Item>
              </Flex.Item>
              <Flex.Item className={`${s.item}`}>
                <Flex.Item className={`${s.childItem}`}>
                  <img src={invite2} className={`${s.iconImg}`} />已奖励金额
                </Flex.Item>
                <Flex.Item className={`${s.childItem}`}>
                  {recordData.hasGetAmount}元
                </Flex.Item>
              </Flex.Item>
              <Flex.Item className={`${s.item}`}>
                <Flex.Item className={`${s.childItem}`}>
                  <img src={invite3} className={`${s.iconImg}`} />待奖励金额
                </Flex.Item>
                <Flex.Item className={`${s.childItem}`}>
                  {recordData.waitAmount}元
                </Flex.Item>
              </Flex.Item>
            </Flex>
          ) : (
            <div>
              <Flex
                className={`${s.inviteCode}`}
                justify="center"
                align="center"
              >
                <Flex.Item className={`${s.item} ${s.leftItem}`}>
                  我的邀请码：{recordData.myCode}
                </Flex.Item>
                <Flex.Item className={`${s.item}`}>
                  邀请人数：{recordData.inviterUserNum}
                </Flex.Item>
              </Flex>

              <Flex className={`${s.tabBox}`}>
                <Flex.Item className={`${s.item}`}>
                  <Flex.Item className={`${s.childItem}`}>
                    <img src={invite4} className={`${s.iconImg}`} />注册日期
                  </Flex.Item>
                </Flex.Item>
                <Flex.Item className={`${s.item}`}>
                  <Flex.Item className={`${s.childItem}`}>
                    <img src={invite1} className={`${s.iconImg}`} />好友名称
                  </Flex.Item>
                </Flex.Item>
                <Flex.Item className={`${s.item}`}>
                  <Flex.Item className={`${s.childItem}`}>
                    <img src={invite2} className={`${s.iconImg}`} />当前状态
                  </Flex.Item>
                </Flex.Item>
              </Flex>
              {JSON.stringify(recordData.transactionList) == "[]" ||
              recordData.transactionList == undefined ? (
                <Flex align="center" justify="center">
                  暂时没有邀请记录！
                </Flex>
              ) : null}
            </div>
          )}
          <div className={`${s.bigBtn}`} onClick={this.inviteBtn.bind(this,true)}>立即邀请赚取佣金</div>
        </div>
        <Modal
          wrapClassName={`${s.vertical}`}
          title={this.state.dialogTitle}
          visible={this.state.visible}
          onCancel={this.handleCancel.bind(this)}
          footer={null}
          className={`${s.antmodal}`}
        >
          <div
            className={`${s.tipBox}`}
            style={{ height: "2.4rem", overflowY: "scroll" }}
          >
            <div className={`color26`}>每邀请一个人：</div>
            <div>好友实名认证成功后即可获得25元理财红包奖励。</div>
            <div>
              好友一个月内完成首次投资，则享受好友投资额0.2％做为推荐奖励。
            </div>
            <div>
              好友注册之日起，一个月之内累计投资超过5w元，则享受好友投资额0.3％做为推荐奖励。
            </div>
            <div className={`color26`}>
              邀请N个人：N个首次投资奖＋N笔投资返现。
            </div>
            <div>
              举个例子：小明成功邀请20位好友投资，这些好友首笔投资均为一万元，并且一个月之内均累计投资超过5w元，假设平均每人投资10w元。则小明所获得的奖励为：20*10000*0.2%+20*100000*0.3%＝6400
              元
            </div>
            <div className={`color26`}>
              每个月送出两台Apple Watch，分别奖励给：
            </div>
            <div>完成首笔投资的好友人数第一名；</div>
            <div>本人与好友累加投资额第一名；</div>
            <div className={`color26`}>*本规则最终解释权归安心投所有</div>
          </div>
        </Modal>
      </div>
    );
  }
}
